var datas = [
    {
        type: '化妆品',
        list: [
            {
                name: '化妆品1',
                link:'http://www.baidu.com',
                img:'./img/09c3656f9c686eca.jpg.dpg',
                price: 998,
                max:5
            },
            {
                name: '化妆品2',
                link:'http://www.baidu.com',
                img:'./img/09c3656f9c686eca.jpg.dpg',
                price: 888,
                max:2
            },
            {
                name: '化妆品3',
                link:'http://www.baidu.com',
                img:'./img/ca730b93accee7b9.jpg.dpg',
                price: 1098
            }
        ]
    },
    {
        type: '女装',
        list: [
            {
                name: '女装1',
                link:'http://www.baidu.com',
                img:'./img/ca730b93accee7b9.jpg.dpg',
                price: 198,
                max:10
            },
            {
                name: '女装2',
                link:'http://www.baidu.com',
                img:'./img/ca730b93accee7b9.jpg.dpg',
                price: 288
            },
            {
                name: '女装3',
                link:'http://www.baidu.com',
                img:'./img/ca730b93accee7b9.jpg.dpg',
                price: 398
            }
        ]
    },
    {
        type: '男装',
        list: [
            {
                name: '男装1',
                link:'http://www.baidu.com',
                img:'./img/ca730b93accee7b9.jpg.dpg',
                price: 98
            },
            {
                name: '男装2',
                link:'http://www.baidu.com',
                img:'./img/ca730b93accee7b9.jpg.dpg',
                price: 88
            },
            {
                name: '男装3',
                link:'http://www.baidu.com',
                img:'./img/ca730b93accee7b9.jpg.dpg',
                price: 78
            },
            {
                name: '男装4',
                link:'http://www.baidu.com',
                img:'./img/47e35bd2d1b5959a.jpg.dpg',
                price: 78
            }
        ]
    }
];

function $(sel){
    return document.querySelector(sel);
}

let typeEle = $('.type');
// 渲染数据
function renderData(){
    let ul_html = '';
    datas.forEach(function(obj,idx){
        let li = '<li>';
        if(idx === 0) li = '<li class="active">';
        ul_html += li + obj.type + '</li>';
        // 渲染具体的产品信息
        obj.list.map(function(){
            obj.onclick = function(){
                $('.box_right').innerHTML= `<div class="item">
                                                <p><input type="checkbox"></p>
                                                <div class="img">
                                                    <a href="${datas.list.link}" target="_blank">
                                                        <img src="${datas.list.img}" alt="">
                                                    </a>
                                                </div>
                                                <h4>
                                                    <a href="${datas.list.name}" target="_blank">男装3
                                                    </a>
                                                </h4>
                                                <h5>${datas.list.price}</h5>
                                            </div>`
            }
        })
    });
    typeEle.innerHTML = ul_html;
}
renderData();


